<template>
  <div class="message-page">
    <div class="detail">
      <h4 class="title">留言板</h4>
      <div class="content">欢迎来到我的博客，尽情的留下你的脚印吧!</div>
    </div>
    <div class="comment">
      <comment :article-id="0" :likes="siteLikes"></comment>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent } from "vue";
import Comment from "@/components/comment/index.vue";
import { useEnhandle } from "../enhandle";
export default defineComponent({
  name: "Message",
  components: {
    Comment,
  },
  setup() {
    const { store } = useEnhandle();
    const isMobile = computed(() => store.state.global.isMobile);
    const siteLikes = computed(() => {
      const appOption = store.state.global.appOption.data;
      return appOption?.meta?.likes || 0;
    });
    const fetchAllData = () => {
      return Promise.all([
        store.dispatch("global/fetchAppOption"),
        store.dispatch("comment/fetchList", { article_id: 0 }),
      ]);
    };
    fetchAllData();

    return {
      isMobile,
      siteLikes,
    };
  },
});
</script>

<style lang="scss" scoped>
.message-page {
  .detail {
    margin-bottom: $gap;
    padding: $gap;
    @include radius-box($lg-radius);
    @include common-bg-module();
    .title {
      font-size: 20px;
      text-align: center;
    }
  }
}
</style>
